<template>
	<view>
		<view class="setBox">
			<view class="setTitle">
				记工提醒
				<view class="setBtn">
					<u-switch v-model="checked" :loading="loading" active-color="#327FE8" @change='changeStatus'></u-switch>
				</view>
			</view>
			<view class="timeBox" v-if="checked" @click="showTime=true">
				每人{{timeData}}提醒
				<view class="timeIcon">
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</view>
		
		
		<u-popup  mode="center" v-model="showTime" border-radius='20' @close="closeBtn" closeable close-icon-size="40" duration="0">
			<view class="timeListBox">
				<view class="timeListTitle" @click="closeBtn">
					提醒时间选择
				</view>
				<view class="timeItem" v-for="(item,index) in timeList" :key="index" @click="selectTime(item)">
					{{item}}
				</view>
			</view>
		</u-popup>
		
		<view class="messageRemark">
			请定时更新授权，防止消息无法正常推送，建议勾选长期授权
		</view>
		<view class="messageItem" v-for="(item,index) in wxMessage" :key="index" @click="openClick(item.id)">
			{{item.title}}
			<text>{{item.des}}</text>
			<view class="messageTimeBtn">
				更新授权
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				timeData:'18:00',
				timeList:['9:00','12:00','14:00','18:00','20:00'],
				timeIndex:3,
				checked:false,
				wxMessage:[],
				showTime:false,
				userMessage:{},
				
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
		},
		onShow: function() {
			this.getWxMessageList();
			this.getMessageUser();
		},
		onReady() {
			
		},
		methods: {
			
			closeBtn(){
				this.showTime=false;
			},
			changeStatus(e){
				console.log(e)
				this.checked=e
				this.setMessag();
				
			},
			selectTime(timeStr){
				this.timeData=timeStr
				this.showTime=false;
				this.setMessag();
			},
			// 获取关于我们
			getMessageUser() {
				var _this = this;
				_this.$u.get('/api/user.message/wxMessageUser', {
					
				}).then(res => {
					
					_this.userMessage = res.data;
					_this.timeData = res.data.time_str;
					if(res.data.status==1){
						_this.checked=true;
					}else{
						_this.checked=false;
					}
					
				}).catch(res => {
					console.log(res);
				})
			},
			setMessag(){
				var _this = this;
				var status=1;
				if(!_this.checked){
					status=2;
				}
				_this.$u.post('/api/user.message/wxMessageSet', {
					status:status,
					time_str:_this.timeData
				}).then(res => {
					
					
				}).catch(res => {
					console.log(res);
				})
			},
			// 获取关于我们
			getWxMessageList() {
				var _this = this;
				_this.$u.get('/api/user.message/wxMessageList', {
					type: 'about',
				}).then(res => {
					
					_this.wxMessage = res.data;
				}).catch(res => {
					console.log(res);
				})
			},
			
			openClick(id){
				wx.requestSubscribeMessage({
				  tmplIds: [id],
				  success (res) {
					  console.log(res)
					  if(res[id]=='accept'){
						  uni.showToast({
						  	title:'授权成功',
							icon:'success'
						  })
					  }
					  if(res[id]=='reject'){
						  uni.showToast({
							title:'已拒绝',
							icon:'error'
						  })
					  }
				  }
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.setBox{
		width: 690rpx;
		margin: 0 auto;
		background-color: #F5F6F8;
		padding: 20rpx;
		border-radius:20rpx;
	}
	.setBtn{
		float: right;
	}
	.setTitle{
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		color: $uni-color;
		
	}
	.timeListTitle{
		width: 100%;
		text-align: center;
		padding-bottom: 20rpx;
	}
	.timeBox{
		background-color: #ECEDEF;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 20rpx;
		border-radius:20rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.timeIcon{
		position: absolute;
		right: 20rpx;
		top: 0rpx;
	}
	.messageRemark{
		width: 690rpx;
		margin: 20rpx auto;
		color: $uni-color-text;
	}
	
	.messageItem{
		width: 690rpx;
		height: 140rpx;
		margin: 20rpx auto;
		background-color: #F5F6F8;
		border-radius:20rpx;
		padding: 20rpx;
		font-weight: bold;
		line-height: 50rpx;
		position: relative;
	}
	.messageItem text{
		display: block;
		font-weight: 400;
		color: $uni-color-text;
	}
	.messageTimeBtn{
		position: absolute;
		right: 20rpx;
		top: 40rpx;
		background-color: $uni-color-active;
		width: 150rpx;
		height: 60rpx;
		border-radius: 20rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 400;
	}
	.timeListBox{
		padding: 20rpx;
		width: 600rpx;
		height: 400rpx;
		
	}
	.timeItem{
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #e2e2e2;
		width: 160rpx;
		float: left;
		margin: 10rpx;
		text-align: center;
		border-radius: 10rpx;
	}
</style>
